<template>
  <div class="canves_box">
    <canvas
      :style="objectStyle"
      ref="canves"
      draggable="true"
      @mousedown="handleMouseEvent"
      @mousemove="handleMouseEvent"
      @click="handleMouseEvent"
      @dblclick="handleMouseEvent"
      @mouseup="handleMouseEvent"
      @drag="handleMouseEvent"
      @dragend="handleMouseEvent"
      @dragstart="handleMouseEvent"
    >
    </canvas>
    <div :class="['loading', isload ? 'dn' : '']"></div>
  </div>
</template>
<script setup>
import Socket from '../../utils/request/websocketBrowser'
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const canves = ref(null)
const io = new Socket()
const isload = ref(false)
const objectStyle = reactive({
  width: 0,
  height: 0
})
io.connect()
io.receive('screenImage', (res) => {
  isload.value = true
  const url = window.URL.createObjectURL(new Blob([res]))
  var img = new Image()
  img.src = url
  img.onload = function () {
    onload(img)
  }
})
io.receive('screenSize', (res) => {
  if (res) {
    canves.value.setAttribute('width', res.width)
    canves.value.setAttribute('height', res.height)
    objectStyle.width = res.width
    objectStyle.height = res.height
  }
})
function onload (img) {
  var ctx = canves.value.getContext('2d')
  ctx.drawImage(img, 0, 0)
}
function handleMouseEvent (e) {
  const img = new Image()
  img.src = '@/assets/images/login.png'
  if (e.dataTransfer) {
    e.dataTransfer.setDragImage(img, 10, 10)
  }
  io.send('mouse', {
    type: 'mouse',
    event: {
      type: e.type,
      buttonType: e.buttons === 2 ? 'right' : 'left',
      x: e.offsetX,
      y: e.offsetY
    }
  })
}
window.onkeypress = window.onkeyup = window.onkeydown = handleKeyboardEvent
function handleKeyboardEvent (e) {
  if (
    e.keyCode === 37 ||
    e.keyCode === 38 ||
    e.keyCode === 39 ||
    e.keyCode === 40
  ) {
    io.send('userEvent', {
      type: 'keyboard',
      event: {
        type: e.type,
        keyName:
          e.key.split('Arrow')[1].slice(0, 1).toLowerCase() +
          e.key.split('Arrow')[1].slice(1),
        keyCode: e.keyCode
      }
    })
  } else {
    io.send('userEvent', {
      type: 'keyboard',
      event: {
        type: e.type,
        keyName: e.key.slice(0, 1).toLowerCase() + e.key.slice(1),
        keyCode: e.keyCode
      }
    })
  }
}
function keyDown (e) {
  e.preventDefault()
}
onMounted(() => {
  document.addEventListener('keydown', keyDown)
})
onUnmounted(() => {
  document.removeEventListener('keydown', keyDown)
})
onBeforeRouteLeave((to, from) => {
  io.disConnect()
})
</script>
<style lang="less" scoped>
.canves_box {
  flex: 1;
  overflow: auto;
  position: relative;
  background: black;
  .loading {
    position: absolute;
    border-left: 1px solid rgb(25, 137, 250);
    border-bottom: 1px solid rgb(25, 137, 250);
    border-radius: 50%;
    width: 500px;
    height: 500px;
    left: 40%;
    top: 30%;
    color: red;
    animation: myAnimation 2s linear infinite;
    // background: red;
  }
  @keyframes myAnimation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
.dn {
  display: none;
}
</style>
